<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/includes/common.jsp" %>

	<fieldset style="float: left;width: 50%;">
		<div id="view-mode-buttons" >
			<a id="dish-list-button" href="#" onclick="showDishList();"style="font-weight: normal">Danh sách món ăn</a> :: 
			<a id="recommend-list-button" href="#" onclick="showRecommendList();" style="font-weight: bold">Danh sách gợi ý</a>
		</div>
		<div id="dish-list" style="overflow: auto; width: 100%; height: 500px;display: none">
			<iframe id="dish-list-frame" src="${path}/dish/list?edit=false" width="98%" height="490px" frameborder="0"></iframe>
		</div>
		<div id="recommend-list" style="overflow: auto; width: 100%; height: 500px;">
			<iframe id="recommend-list-frame" width="98%" height="490px" frameborder="0"></iframe>
		</div>
	</fieldset>
	
	<fieldset style="float: right;width: 43%;">
		<jsp:include page="chat.jsp"></jsp:include>
	</fieldset>
	<script type="text/javascript">
		function showDishList(){
			$("#dish-list").show();
			$("#dish-list-button").css("font-weight","bold");
			$("#recommend-list").hide();
			$("#recommend-list-button").css("font-weight","normal");

			$("#dish-list-frame").attr('src','${path}/dish/list?edit=false');
		}

		function showRecommendList(){
			$("#dish-list").hide();
			$("#dish-list-button").css("font-weight","normal");
			$("#recommend-list").show();
			$("#recommend-list-button").css("font-weight","bold");
		}

	</script>